<template>
  <div>
    <div class="page_box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="1"></el-tab-pane>
        <el-tab-pane label="参加活动" name="2">
          <span slot="label">
            参加活动
            <span class="tab-badge">{{joinActive}}</span>
          </span>
        </el-tab-pane>
      </el-tabs>
      <el-button @click="goBack" class="return_btn" size="mini">返回</el-button>

      <el-form
        v-if="!showIndex"
        :model="form"
        label-width="130px"
        style="width:100%;margin-top:20px"
        label-position="left"
        class="basiInfo_userInfo"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="头像：">
              <el-image :src="form.cover" style="width:200px"></el-image>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="ID：">
              <span>{{form.id}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="4">
            <el-form-item label="生日：">
              <span>{{form.birth}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="真实姓名：">
              <span>{{form.realName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="4">
            <el-form-item label="邮箱：">
              <span>{{form.email}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="用户名：">
              <span>{{form.userName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="4">
            <el-form-item label="联系方式：">
              <span>{{form.phone}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="血型：">
              <span>{{form.blood}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="4">
            <el-form-item label="身份证：">
              <span>{{form.idCard}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="城市：">
              <span>{{form.city}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="4">
            <el-form-item label="紧急联系人：">
              <span>{{form.emergencyContact}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="性别：">
              <span>{{form.gender}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="4">
            <el-form-item label="紧急联系方式：">
              <span>{{form.urgencyPhone}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="跑龄：">
              <span>{{form.runAge}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="4">
            <el-form-item label="半马最好成绩：">
              <span>{{form.marathonGrade_B}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="衣服尺码：">
              <span>{{form.clothes}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="4">
            <el-form-item label="十公里最好成绩：">
              <span>{{form.tenGrade}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="鞋子尺码：">
              <span>{{form.shoes}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="4">
            <el-form-item label="全马最好成绩：">
              <span>{{form.marathonGrade_A}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址：">
              <span>{{form.adress}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 参加活动 -->
      <div v-else>
        <active-list style="margin-top:40px" :handle="true" :list="list.data"></active-list>
        <div class="page-box">
          <el-pagination
            background
            small
            :current-page="current_page"
            :page-size="per_page"
            layout="total, prev, pager, next, jumper"
            :total="30"
          ></el-pagination>
        </div>
      </div>

      <!-- <el-table size="mini" v-else   :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}" border :data="tableData" style="width: 100%;margin-top:40px">
        <el-table-column prop="activeName" label="活动名称" width="180"></el-table-column>
        <el-table-column prop="type" label="活动类型" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 1" size="mini" effect="dark">赛事</el-tag>
            <el-tag v-else-if="scope.row.type == 3" size="mini" effect="dark" type="warning">任务</el-tag>
            <el-tag v-else size="mini" effect="dark" type="danger">活动</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="城市"></el-table-column>
        <el-table-column prop="time" label="活动时间"></el-table-column>
        <el-table-column prop="runName" label="跑团名称"></el-table-column>
        <el-table-column prop="state" label="活动状态">
          <template slot-scope="scope">
            <el-link :underline="line" v-if="scope.row.state == 1" type="danger">报名未开始</el-link>
            <el-link :underline="line" v-else-if="scope.row.state == 2" type="primary">报名已结束</el-link>
            <el-link :underline="line" v-else-if="scope.row.state == 3" type="success">活动进行中</el-link>
            <el-link :underline="line" v-else-if="scope.row.state == 4" type="warning">活动已结束</el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button size="mini" icon="el-icon-view">查看</el-button>
          </template>
        </el-table-column>
      </el-table>-->
    </div>
  </div>
</template>

<script>
import activeList from "../active/list-table";

export default {
  components: {
    activeList
  },
  data() {
    return {
      joinActive: 5,
      line: false,
      activeName: "1",
      current_page: 1,
      per_page: 10,
      showIndex: 0,
      list: {
        current_page: 1,
        data: [
          {
            cover:
              "https://ykp-new.oss-cn-hangzhou.aliyuncs.com//manage/3333.jpg?x-oss-process=image/resize,h_200",
            type: 1,
            name: "团报测试",
            sign_up_start: " 2020-03-14 14:54:43",
            sign_up_end: " 2020-03-14 14:54:43",
            start_time: " 2020-03-14 14:54:43",
            end_time: " 2020-03-14 14:54:43",
            active_limit: "1",
            user_num: "20",
            address: "合肥市未来塔",
            state: 2
          }
        ],
        total: 50
      },
      form: {
        cover: require("../../assets/img/brand02.png"),
        id: "2354",
        userName: "地方",
        realName: "张三",
        phone: "16655475526",
        idCard: "3546874321144648711",
        gender: "男",
        blood: "A",
        birth: "2000-01-02",
        city: "合肥",
        runAge: "1",
        emergencyContact: "老师",
        urgencyPhone: "1547653544",
        email: "110657624@qq.com",
        shoes: "42",
        clothes: "M",
        tenGrade: "1:20:30",
        marathonGrade_B: "1:20:30",
        marathonGrade_A: "1:20:30",
        adress: "安徽省合肥市"
      },
      tableData: [
        {
          activeName: "春天跑",
          type: 1,
          city: "合肥",
          time: "2020-01-03 ",
          runName: "运动团",
          state: 1
        },
        {
          activeName: "春天跑",
          type: 1,
          city: "合肥",
          time: "2020-01-03 ",
          runName: "运动团",
          state: 3
        },
        {
          activeName: "春天跑",
          type: 2,
          city: "合肥",
          time: "2020-01-03 ",
          runName: "运动团",
          state: 2
        },
        {
          activeName: "春天跑",
          type: 3,
          city: "合肥",
          time: "2020-01-03 ",
          runName: "运动团",
          state: 4
        }
      ]
    };
  },
  methods: {
    handleClick(e) {
      this.showIndex = +e.index;
    },
    goBack() {
      console.log(1);
      this.$router.back(-1);
    }
  }
};
</script>

<style scoped>
.return_btn {
  float: right;
  background-color: #8a70c6;
  border: none;
  color: #ffffff;
}
.basiInfo_userInfo .el-form-item /deep/.el-form-item__label {
  font-size: 14px;
  color: #666666;
  font-weight: bold;
}
.basiInfo_userInfo .el-form-item {
  margin-bottom: 2px;
}
</style>